<template>
    <el-container direction="vertical" :style="wrapStyle">
        <Top></Top>
        <el-container>
            <Aside></Aside>
            <el-main>
              <el-header>
                <el-row>
                    <el-button type="success" @click="dialogFormVisible1 = true" icon="el-icon-circle-plus-outline">
                    注册</el-button>
                    <el-button type="danger" @click="delChoose">删除选中</el-button>
                </el-row>
                </el-header>
                <el-main>
                <el-table
                    @selection-change="handleSelectionChange"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    type="selection"
                    width="55"
                    label="全选">
                    </el-table-column>
                    <el-table-column
                    prop="username"
                    label="用户名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="password"
                    label="密码"
                    width="150">
                    <template v-slot:default="scope">
                        {{scope.row.password | psdFilters}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="email"
                    label="电子邮箱">
                    </el-table-column>
                    <el-table-column
                    prop="sex"
                    label="性别"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="hobby"
                    label="爱好">
                    </el-table-column>
                    <el-table-column label="编辑" prop="set">
                        <template v-slot:default="scope">
                        <el-button type="primary" size="small" @click="modify(scope.$index)">编辑</el-button>
                        <el-button type="danger"  size="small" @click="del(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </el-main>
                <el-dialog title="注册用户" :visible.sync="dialogFormVisible1">
                  <el-form :model="form" :rules="rules">
                      <el-form-item label="用户名" size="small" prop="username">
                      <el-input v-model="form.username" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="密码" size="small"  prop="password">
                      <el-input v-model="form.password" placeholder="请输入密码" show-password autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱" size="small" prop="email">
                      <el-input v-model="form.email" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="性别" size="small" prop="sex">
                      <el-radio v-model="form.sex" label="男">男</el-radio>
                      <el-radio v-model="form.sex" label="女">女</el-radio>
                      </el-form-item>
                      <el-form-item label="爱好" size="small" prop="checkList">
                      <el-checkbox-group v-model="checkList">
                          <el-checkbox label="篮球"></el-checkbox>
                          <el-checkbox label="足球"></el-checkbox>
                          <el-checkbox label="排球"></el-checkbox>
                          <el-checkbox label="羽毛球"></el-checkbox>
                          <el-checkbox label="乒乓球"></el-checkbox>
                          <el-checkbox label="台球"></el-checkbox>
                          <el-checkbox label="其他"></el-checkbox>
                      </el-checkbox-group>
                      </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                      <el-button type="primary" @click="addNewData">确 定</el-button>
                  </div>
                </el-dialog>
                <el-dialog title="修改用户" :visible.sync="dialogFormVisible2">
                  <el-form :model="modUsr" :rules="rules">
                      <el-form-item label="用户名" size="small" prop="username">
                      <el-input v-model="modUsr.username" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="密码" size="small"  prop="password">
                      <el-input v-model="modUsr.password" placeholder="请输入密码" show-password autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱" size="small" prop="email">
                      <el-input v-model="modUsr.email" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="性别" size="small" prop="sex">
                      <el-radio v-model="modUsr.sex" label="男">男</el-radio>
                      <el-radio v-model="modUsr.sex" label="女">女</el-radio>
                      </el-form-item>
                      <el-form-item label="爱好" size="small" prop="checkList">
                      <el-checkbox-group v-model="modMheckList">
                          <el-checkbox label="篮球"></el-checkbox>
                          <el-checkbox label="足球"></el-checkbox>
                          <el-checkbox label="排球"></el-checkbox>
                          <el-checkbox label="羽毛球"></el-checkbox>
                          <el-checkbox label="乒乓球"></el-checkbox>
                          <el-checkbox label="台球"></el-checkbox>
                          <el-checkbox label="其他"></el-checkbox>
                      </el-checkbox-group>
                      </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                      <el-button type="primary" @click="mod">确 定</el-button>
                  </div>
                </el-dialog>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from 'axios'
import Aside from '@/components/Aside'
import Top from '@/components/top'
export default {
  components:{
    Aside,
    Top
  },
  mounted(){
    let height = document.documentElement.clientHeight;
    this.wrapStyle.height = height+'px';
    console.log(height)
  },
  data() {
    return {
      wrapStyle:{
        height:""
      },
      modIndex:-1,
      modUsr:{},
      modMheckList:[],
      dialogFormVisible2: false,
      dialogFormVisible1: false,
      multipleSelection:[],
      tableData: [],
      form: {
        username:"",
        password:"",
        email:"",
        sex:"",
        hobby:""
      },
      checkList:[],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        checkList: [
          { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
        ]
      }
    }
  },
  filters:{
    psdFilters(){
      return "******"
    }
  },
  created(){
    this.getData()
  },
  methods:{
    mod(){
      this.modUsr.hobby = this.modMheckList.join("-")
      axios.put(`http://192.168.20.164:3000/usr/${this.modIndex}`,{
        usr:this.modUsr
        }).then(()=>{
        this.dialogFormVisible2 = false;
        this.getData();
      }).catch(err=>{
        console.log(err)
      })
    },
    modify(i){
      this.dialogFormVisible2 = true;
      this.modIndex = i;
      axios.get(`http://192.168.20.164:3000/getMod/${i}`).then(res=>{
        let tempArr = res.data.hobby.split("-");
        this.modMheckList = tempArr;  
        this.modUsr = res.data;
      })
    },
    getData(){
      axios.get("http://192.168.20.164:3000/usr").then(res=>{
        this.tableData = res.data;
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delChoose(){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for(let i=0;i<this.multipleSelection.length;i++){
          for(let j=0;j<this.tableData.length;j++){
            if(this.multipleSelection[i].username == this.tableData[j].username){
              this.tableData.splice(j,1);
            }
          }
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    addNewData(){
      let str = this.checkList.join("-");
      this.form.hobby = str;
      this.dialogFormVisible1 = false;
      console.log(this.form)
      axios.post("http://192.168.20.164:3000/usr",{data:this.form}).then(()=>{
        this.getData();
      }).catch(err=>{
        console.log(err)
      })
      this.form = {}
      this.checkList = []
    },
    del(i){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://192.168.20.164:3000/usr/${i}`).then(()=>{
          this.getData();
        }).catch(err=>{
          console.log(err)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
}
</script>
<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    line-height: 50px;
    /* min-height: calc(100vh - 60px); */
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>